import { Button, Form, Input, Table, Popconfirm, Modal, InputNumber, Select, DatePicker, message } from 'antd';
import { useEffect, useState } from 'react';
import axios from 'axios'
import { getMallInfo, deleteMallInfo } from '../../api/mall/index'
import { updateIdentifyList } from '../../api/login/index';
import dayjs from 'dayjs';
import './mall.css'
export default function Mall() {

    // 定义列表内容
    const [tableData, setTableData] = useState([])
    // 定义弹窗显示的标题， 因为有不同的状态，所以也要定义 useState
    const [modalTitle, setModalTitle] = useState('')
    // 创建一个控制弹框的打开关闭状态变量
    const [isModalOpen, setIsModalOpen] = useState(false)
    // 创建一个 form 实例
    const [form] = Form.useForm()


    function handleCancel() {
        console.log('取消');
    }

    function handleOk() {
        console.log('确定');
    }

    function handleClick() {
        console.log('点击');
    }

    function handleFinish(values) {
        console.log(values, 'values');
        // values 就是表单中填的内容，是根据 绑定的 form 实例实现的
        // 引入dayjs, 对日期的格式进行处理
        // values.date = dayjs(values.date).format('YYYY-MM-DD')
        // console.log(values, 'newval');
        // 参数有了，接下来就是调后端接口，根据传入的弹框type 进行判断
        getMallInfo(values).then((res) => {
            console.log(res, 'resssssssss');
            setTableData(res.data)
        })
    }

    function handleDelete(row) {
        console.log('删除', row);
        const params = {
            id: row.id
        }
        deleteMallInfo(params).then((res) => {
            console.log(res);
            message.success('删除成功')
        }).then(() => {
            getMallList()
        })
    }
    /* /UploadControlle/upload 图片上传接口 */
    const columns = [
        {
            title: '商品名称',
            dataIndex: 'mallName'
        },
        {
            title: '商品成本',
            dataIndex: 'mallCost'
        },
        {
            title: '商品类别',
            dataIndex: 'mallCategory',
        },
        {
            title: '商品型号',
            dataIndex: 'mallVersion',
        },
        {
            title: '参数',
            dataIndex: 'mallParam'
        },
        {
            title:'商品库存',
            dataIndex:'mallRepertory'
        },
        {
            title: '图例(点击查看大图)',
            dataIndex: 'mallPic',
            render: (row) => {
                return (
                    <div onClick={() => {
                        console.log('图片放大');
                    }}>
                        <img src={row} alt="" width={'50px'} />
                    </div>
                )
            }
        },
        {
            title: '操作',
            width: '250px',
            render: (rowData) => {
                return (
                    <div className='flex=box'>
                        <Button type='primary' style={{ marginRight: '5px' }} onClick={handleClick.bind('', 'edit', rowData)}>编辑信息</Button>
                        {/* 使用 .bind 传值， 第一个值默认传一个事件对象 */}
                        <Popconfirm
                            title='提示'
                            description='你确定要删除吗？'
                            okText='确定'
                            cancelText='取消'
                            onConfirm={handleDelete.bind('', rowData)}
                        >
                            <Button type='primary' danger>删除商品</Button>
                            {/* 事件的确认会确认到 外层的 pop气泡弹窗上 */}
                        </Popconfirm>
                    </div>
                )
            }
        }

    ]
    function getMallList() {
        getMallInfo().then((res) => {
            if (res.code === 200) {
                console.log(res.data, '商品列表');
                setTableData(res.data)
            }
        })
    }
    // 渲染完成调用接口
    useEffect(() => {
        getMallList()
    }, [])
    function test111() {
        fetch('https://api.ipify.org?format=json').
        then(response => response.json()).
        then(data => {
          const ip = data.ip
          console.log(ip,'ipp');
          //通过ip地址获取所在地
          fetch(`https://api.oioweb.cn/api/ip/ipaddress?ip=${ip}`).
            then((res) => res.json()
              .then((data) => {
                console.log(data);
              })
            )
        })
        .catch(error => { console.error(error) })
    }

    return (
        <div className='mall'>
            <div className='flex-box'>
                <Form layout='inline' onFinish={handleFinish}>
                    <Form.Item name='mallCategory'>
                        <Input placeholder='请输入商品类别'></Input>
                    </Form.Item>
                    <Form.Item name='mallVersion'>
                        <Input placeholder='请输入商品型号'></Input>
                    </Form.Item>
                    <Form.Item>
                        <Button type='primary' htmlType='submit'>搜索</Button>
                    </Form.Item>
                </Form>
            </div>
            <Button onClick={() => {
                test111()
            }}>test</Button>
            <Table columns={columns} dataSource={tableData} rowKey={'id'} style={{
                marginTop: '20px'
            }}></Table>
            <Modal
                title={modalTitle === 'add' ? '新增用户' : '编辑信息'}
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
                okText='确定'
                cancelText='取消'
            >
                <Form
                    /* 设置表单的布局，使用 grid 栅格布局 */
                    labelCol={{
                        span: 6
                    }}
                    wrapperCol={{
                        span: 18
                    }}
                    // 对齐方式
                    labelAlign='left'
                    // 书写表单清空，需要拿到 form 的实例, 要使用 antd 提供的一个钩子函数->form.useForm()
                    form={form}
                >
                    <Form.Item>
                        <Form.Item name='id' noStyle>
                            <Input type='hidden'></Input>
                            {/* 只需要给 Input 输入框带一个 hidden的属性，就可以让输入框不可见 */}
                        </Form.Item>
                    </Form.Item>
                    <Form.Item label='姓名' name='name' rules={[
                        { required: true, message: '请输入姓名' }
                    ]}>
                        <Input placeholder='请输入姓名'></Input>
                    </Form.Item>
                    <Form.Item label='年龄' name='age' rules={[
                        { required: true, message: '请输入年龄' },
                        { type: 'number', message: '年龄必须为数字' }
                        // 定义 校验规则， type必须为 number 类型
                    ]}>
                        <InputNumber placeholder='请输入年龄'></InputNumber>
                        {/* antd  提供了number类型的输入框， 只能输入数字 */}
                    </Form.Item>
                    <Form.Item label='性别' name='sex' rules={[
                        { required: true, message: '请输入性别' }
                    ]}>
                        {/* 使用下拉选择器 */}
                        <Select
                            options={[
                                { value: 0, label: '男' },
                                { value: 1, label: '女' }
                            ]}
                            placeholder='请选择性别'
                        >
                            {/* 子项通过 options 定义子项 */}
                        </Select>
                    </Form.Item>
                    <Form.Item label='出生日期' name='date' rules={[
                        { required: true, message: '请选择日期' }
                    ]}>
                        <DatePicker format='YYYY/MM/DD' placeholder='请选择日期' />
                    </Form.Item>
                </Form>
            </Modal>
        </div >
    )
}